window.onload = function () {
  addRecordClick();
  changeRecordClick();
  exportClick();
  init();
};

const addRecordClick = () => {
  const newRecordName = document.getElementById('newRecordName');
  const newrecordAge = document.getElementById('newRecordAge');
  const newRecordSubmit = document.getElementById('newRecordSubmit');

  bind(newRecordSubmit, 'click', () => {
    const recordName = newRecordName?.value.trim();
    const recordAge = Number.parseInt(newrecordAge?.value);
    if (recordName.length === 0 || !recordAge || recordAge < 0) {
      alert('姓名或年龄不合法');
      return;
    }
    new Record({
      recordName,
      recordAge,
    }).insertLocalStorage();
    recordsReload();
    newRecordName.value = '';
    newrecordAge.value = '';
  });
};

const changeRecordClick = () => {
  const recordItems = document.getElementById('recordItems');
  bind(recordItems, 'click', (e) => {
    const target = e.target;
    if (
      [...target.classList].indexOf('remove') + 1 ||
      [...target.classList].indexOf('fa-trash-alt') + 1
    ) {
      Record.removeLocalStorage(
        target.parentNode.id || target.parentNode.parentNode.id
      );
      recordsReload();
    }
  });
  bind(recordItems, 'change', (e) => {
    const target = e.target;
    target.value = Number.parseInt(target.value);
    if ([...target.classList].indexOf('recordAge') + 1) {
      if (!target.value || target.value < 0) {
        alert('年龄不合法');
        e.target.value = e.target.oldvalue;
        return;
      }
      Record.updateLocalStorage(
        { recordAge: target.value },
        target.parentNode.id
      );
      recordsReload();
    } else if ([...target.classList].indexOf('recordName') + 1) {
      if (target.value.trim().length === 0) {
        alert('姓名不合法');
        e.target.value = e.target.oldvalue;
        return;
      }
      Record.updateLocalStorage(
        { recordName: target.value },
        target.parentNode.id
      );
      recordsReload();
    }
  });
  bind(recordItems, 'focusin', (e) => {
    e.target.oldvalue = e.target.value;
  });
};

const exportClick = () => {
  const exportTable = document.getElementById('exportTable');
  const textAreas = document.querySelectorAll('.expArea');
  const cpBtns = document.querySelectorAll('.expCp');
  const expBack = document.querySelector('.back');
  bind(exportTable, 'click', () => {
    const tks = new RecordsTool().tks;
    document.getElementById('jsonForm').querySelector('textarea').value =
      JSON.stringify(
        tks.map((d) => ({
          userName: d.recordName,
          userAge: d.recordAge,
        }))
      );
    let res = '|姓名|年龄|\n|--|--|\n';
    tks.forEach((d) => {
      res += `|${d.recordName}|${d.recordAge}|\n`;
    });
    document.getElementById('mdForm').querySelector('textarea').value = res;
    document.querySelector('.expAlertWapper').classList.add('active');
  });
  cpBtns.forEach((d, i) => {
    bind(d, 'click', () => {
      textAreas[i].select();
      document.execCommand('Copy');
      alert('已复制到剪贴板');
    });
  });
  bind(expBack, 'click', () => {
    document.querySelector('.expAlertWapper').classList.remove('active');
  });
};

const bind = (obj, eventstr, callback) => {
  if (obj.addEventListener) obj.addEventListener(eventstr, callback, false);
  else
    obj.attachEvent('on' + eventstr, function () {
      callback.call(obj);
    });
};

const init = () => {
  if (!localStorage.getItem('recordInfo'))
    localStorage.setItem('recordInfo', '[]');
  recordsReload();
};

const recordsReload = () => {
  new RecordsTool().refreshAll();
};
